<template>
  <el-dialog
    :title="!dataForm.storeId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <!-- <el-form-item label="userId" prop="userId">
        <el-input v-model="dataForm.userId" placeholder="userId"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="storeId" prop="storeId">
        <el-input v-model="dataForm.storeId" placeholder="storeId"></el-input>
      </el-form-item>-->
      <el-form-item label="买家名称" prop="buyerName">
        <el-input v-model="dataForm.buyerName" placeholder="买家名称"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="buyerPhone">
        <el-input v-model="dataForm.buyerPhone" placeholder="电话号码"></el-input>
      </el-form-item>
      <el-form-item label="购买地址" prop="buyerAddress">
        <el-input v-model="dataForm.buyerAddress" placeholder="购买地址"></el-input>
      </el-form-item>
      <el-form-item label="订单价格" prop="orderAmount">
        <el-input v-model="dataForm.orderAmount" placeholder="订单价格"></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <!-- <el-input v-model="dataForm.orderStatus" placeholder="订单状态"></el-input> -->
        <el-select v-model="dataForm.orderStatus" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态" prop="payStatus">
        <!-- <el-input v-model="dataForm.payStatus" placeholder="支付状态"></el-input> -->
        <el-select v-model="dataForm.payStatus" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款时间" prop="payTime">
        <!-- <el-input v-model="dataForm.payTime" placeholder="付款时间"></el-input> -->
        <el-date-picker
          type="date"
          placeholder="付款时间"
          v-model="dataForm.payTime"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="发送时间" prop="sentTime">
        <!-- <el-input v-model="dataForm.sentTime" placeholder="发送时间"></el-input> -->
        <el-date-picker
          type="date"
          v-model="dataForm.sentTime"
          placeholder="发送时间"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="到达时间" prop="arrivedTime">
        <!-- <el-input v-model="dataForm.arrivedTime" placeholder="到达时间"></el-input> -->
        <el-date-picker
          type="date"
          v-model="dataForm.arrivedTime"
          placeholder="到达时间"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结单时间" prop="finishTime">
        <!-- <el-input v-model="dataForm.finishTime" placeholder="结单时间"></el-input> -->
        <el-date-picker
          type="date"
          placeholder="结单时间v"
          v-model="dataForm.finishTime"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        orderId: 0,
        userId: "",
        storeId: 0,
        buyerName: "",
        buyerPhone: "",
        buyerAddress: "",
        orderAmount: "",
        orderStatus: "",
        payStatus: "",
        payTime: "",
        sentTime: "",
        arrivedTime: "",
        finishTime: "",
      },
      options1: [
        { label: '未完成', value: '未完成' }, { label: '已完成', value: '已完成' },{ label: '退款中', value: '退款中' }, { label: '已退款', value: '已退款' }
      ],
      options2: [
        {
          value: "未支付",
          label: "未支付",
        },
        {
          value: "已支付",
          label: "已支付",
        },
      ],
      dataRule: {
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" },
        ],
        storeId: [
          { required: true, message: "店铺ID不能为空", trigger: "blur" },
        ],
        buyerName: [
          { required: true, message: "买家名称不能为空", trigger: "blur" },
        ],
        buyerPhone: [
          { required: true, message: "买家电话不能为空", trigger: "blur" },
        ],
        buyerAddress: [
          { required: true, message: "买家地址不能为空", trigger: "blur" },
        ],
        orderAmount: [
          { required: true, message: "订单价格不能为空", trigger: "blur" },
        ],
        orderStatus: [
          { required: true, message: "订单状态不能为空", trigger: "blur" },
        ],
        payStatus: [
          { required: true, message: "支付状态不能为空", trigger: "blur" },
        ],
        payTime: [
          {
            required: false,
            message: "${column.comments}不能为空",
            trigger: "blur",
          },
        ],
        sentTime: [
          {
            required: false,
            message: "${column.comments}不能为空",
            trigger: "blur",
          },
        ],
        arrivedTime: [
          {
            required: false,
            message: "${column.comments}不能为空",
            trigger: "blur",
          },
        ],
        finishTime: [
          {
            required: false,
            message: "${column.comments}不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    init(id, storeId) {
      this.dataForm.storeId = storeId;
      this.dataForm.orderId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.orderId) {
          this.$http.get(`${process.env.URL_HEAD}/order/order/info/${this.dataForm.orderId}`,
            {
              withCredentials:true
            }
          ).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.userId = data.order.userId;
              this.dataForm.storeId = data.order.storeId;
              this.dataForm.buyerName = data.order.buyerName;
              this.dataForm.buyerPhone = data.order.buyerPhone;
              this.dataForm.buyerAddress = data.order.buyerAddress;
              this.dataForm.orderAmount = data.order.orderAmount;
              this.dataForm.orderStatus = data.order.orderStatus;
              this.dataForm.payStatus = data.order.payStatus;
              this.dataForm.payTime = data.order.payTime;
              this.dataForm.sentTime = data.order.sentTime;
              this.dataForm.arrivedTime = data.order.arrivedTime;
              this.dataForm.finishTime = data.order.finishTime;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http
            .post(
              `${process.env.URL_HEAD}/order/order/${
                !this.dataForm.orderId ? "save" : "update"
              }`,
              {
                orderId: this.dataForm.orderId || undefined,
                userId: this.dataForm.userId,
                storeId: this.dataForm.storeId,
                buyerName: this.dataForm.buyerName,
                buyerPhone: this.dataForm.buyerPhone,
                buyerAddress: this.dataForm.buyerAddress,
                orderAmount: this.dataForm.orderAmount,
                orderStatus: this.dataForm.orderStatus,
                payStatus: this.dataForm.payStatus,
                payTime: this.dataForm.payTime,
                sentTime: this.dataForm.sentTime,
                arrivedTime: this.dataForm.arrivedTime,
                finishTime: this.dataForm.finishTime,
              },
              {
                withCredentials:true
              }
            )
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
        }
      });
    },
  },
};
</script>
